<table id="list2"></table>
<div id="pager2"></div>
	
<script type="text/javascript">
	$(function() {
		$("#list2").jqGrid({
		   	url:'<?=base_url()?>jqgrid/simpleJson',
			datatype: "json",
		   	colNames:['No', 'Name', 'Sex', 'Age', 'Grade'],
		   	colModel:[
		   		{name:'no', index:'no', width:55},
		   		{name:'name', index:'name', width:90},
		   		{name:'sex', index:'sex', width:100},
		   		{name:'age', index:'age', width:80, align:"right"},
		   		{name:'grade', index:'grade', width:80, align:"right"}		
		   	],
		   	height: 255,
			width: 600,
		   	rowNum:10,
		   	rowList:[10,20,30],
		   	pager: '#pager2',
		   	sortname: 'no',
		    viewrecords: true,
		    sortorder: "desc",
		    caption:"JSON Example"
		});

		/*
		$("#list2").jqGrid({
			url:'<?=base_url()?>jqgrid/simpleJson',
			datatype: "json",
			height: 255,
			width: 600,
		   	colNames:['Index','Name', 'Code'],
		   	colModel:[
		   		{name:'item_id',index:'item_id', width:65, sorttype:'int'},
		   		{name:'item',index:'item', width:150},
		   		{name:'item_cd',index:'item_cd', width:100}
		   	],
		   	rowNum:50,
			rowTotal: 2000,
			rowList : [20,30,50],
			loadonce:true,
		   	mtype: "GET",
			rownumbers: true,
			rownumWidth: 40,
			gridview: true,
		   	pager: '#pager2',
		   	sortname: 'item_id',
		    viewrecords: true,
		    sortorder: "asc",
			caption: "Single search on local data"	
		});

		$("#list2").jqGrid('navGrid','#pager2',{del:false,add:false,edit:false});
		*/
	});

</script>